<template>
	<view>
		<!-- tab -->
		<view class="tab">
			<view :class="tabindex==0?'active':''" @click="selecttab(0)">
				浏览量
			</view>
			<view :class="tabindex==1?'active':''" @click="selecttab(1)">
				订单量
			</view>
		</view>
		<!-- 统计 -->
		<view class="statistics" v-show="tabindex==0" @click="aaaa">
			<view class="left">
				<view class="">
					今日浏览量
				</view>
				<view class="cheng">
					{{browsenumber}}
				</view>
			</view>
			<view class="center">

			</view>
			<view class="right">
				<view class="">
					今日下单
				</view>
				<view class="cheng">
					{{placeordernumber}}
				</view>
			</view>
		</view>

		<!-- 图表 -->
		<view class="charts-box" v-show="tabindex==0">
			<!-- 这里的type="demotype"演示了自定义图表类型的demo，您可以根据需求自己定义一种额外的图表类型 -->
			<qiun-data-charts type="demotype" :chartData="chartsDataLine2" />
			<!-- 如果不定义"demotype"这个图表类型，可以通过传递opts来覆盖line下的默认配置，如下 -->
			<!-- <qiun-data-charts type="line" :opts="{extra:{line:{type:'curve'}}}" :chartData="chartsData.Line2"/> -->
		</view>




		<!-- 订单量 -->
		<view class="" v-show="tabindex==1">
			<!-- 选择部分 -->
			<view class="header">
				<view class="box">
					<view class="left">
						技师
					</view>
					<view class="select" @click="technicianshow = true">
						<view class="">
							{{technicianselector[technicianindex].name}}
						</view>
						<view class="image">
							<image src="../../static/xiajiantou.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="box">
					<view class="left">
						日期
					</view>
					<view class="" @click="selecttimeshow = true">
						<view class="" v-show="selecttime==''">
							选择日期
						</view>
						<view class="">
							{{startDate}} - {{endDate}}
						</view>
					</view>
				</view>
				<view class="box">
					<view class="left">
						类型
					</view>
					<view class="select" @click="typeshow = true">
						<view class="">
							{{typelist[typeindex]}}
						</view>
						<view class="image">
							<image src="../../static/xiajiantou.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 列表部分 -->
			<view class="list" v-for="(item,index) in orderteacherlist" :key="index">
				<view class="left">
					<image src="../../static/black.jpg" mode=""></image>
				</view>
				<view class="right">
					<view class="top">
						<view class="name">
							门福通医生
						</view>
						<view class="complete" v-if="item.orderStatus==3">
							已完成
						</view>
						<view class="complete" v-if="item.orderStatus==0">
							已预约
						</view>
						<view class="complete" v-if="item.orderStatus==1">
							进行中
						</view>
						<view class="complete" v-if="item.orderStatus==2">
							待评价
						</view>
						<view class="complete" v-if="item.orderStatus==4">
							已取消
						</view>
					</view>
					<view class="center">
						时间开始：2020/1/26 10:00
					</view>
					<view class="bottom">
						<view class="">
							项目名称：按摩推拿
						</view>
						<view class="lookdetails" @click="todetails">
							查看详情
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 技师选择 -->
		<u-picker mode="selector" v-model="technicianshow" :default-selector="[0]" :range="technicianselector"
			range-key="name" @confirm="selecttechnician"></u-picker>
		<!-- 类型选择模态框 -->
		<u-picker mode="selector" v-model="typeshow" :default-selector="typeindex" :range="typelist"
			@confirm="selecttype"></u-picker>


		<!-- 时间日期选择 -->
		<u-calendar v-model="selecttimeshow" :start-text="start" :end-text="end" :mode="range" @change="selectcalendar">
		</u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabindex: 0,
				technicianshow: false, //技师选择模态框
				technicianindex: 0, //技师已选择下标记
				technicianselector: [], //技师选择
				typelist: ['已预约', "进行中", "待评价", "已完成", "已取消"], //类型选择
				typeindex: 0, //类型选择下标
				typeshow: false, //类型选择模态框
				startDate: '', //开始
				endDate: '', //结束时间
				selecttimeshow: false, //选择时间日期模态框
				start: "开始",
				end: "结束",
				chartsDataLine2: {
					categories: [0,0,0,0,0,0,0],
					series: [{
						name: '客流量',
						data: [0,0,0,0,0,0,0]
					}, {
						name: '支付笔数',
						data: [0,0,0,0,0,0,0]
					}]
				}, //图表数据
				placeordernumber: '', //下单量
				browsenumber: '', //浏览量
				orderteacherlist:[],//订单量医生列表
			}
		},
		onLoad() {
			var date = new Date();
			console.log(date.getMonth())
			var getMonth = ''
			var getDate = ''
			if ((date.getMonth() + 1) < 10) {
				getMonth = "0" + (date.getMonth() + 1)
			} else {
				getMonth = date.getMonth()+1
			}
			if ((date.getDate() + 1) < 10) {
				getDate = "0" + date.getDate()
			} else {
				getDate = date.getDate()
			}
			this.startDate = date.getFullYear() + '-' + getMonth + '-' + getDate
			this.endDate = date.getFullYear() + '-' + getMonth + '-' + getDate
			this.getnumber()
			this.gettime()
			this.getteachname()

		},
		methods: {
			//获取订单列表
			getorderlist() {
				var that = this
				var data = {
					endDate: that.endDate,
					massagistId: that.technicianselector[that.technicianindex].id,
					orderStatus: that.typeindex,
					startDate: that.startDate,
					storeId: 1,
				}
				that.$http('/api/user/store/getStoreMassagistDateList?limit=' + 100 + '&page=' + 1, 'POST', data).then((
					res) => {
					console.log('获取订单列表', res.data.data.list)
					that.orderteacherlist = res.data.data.list
				})
			},

			//获取技师姓名
			getteachname() {
				var that = this
				var data = {}
				that.$http('/api/user/store/getMassagist?storeId=' + 1 + 'limit=' + 100 + '&page=' + 1, 'POST', data).then(
					(res) => {
						console.log('获取技师列表', res)
						that.technicianselector = res.data.data.list
						that.getorderlist()
					})
			},
			//获取支付笔数
			getordernumber() {
				var that = this
				var data = {}
				that.$http('/api/user/store/getStatisticOrderNumList/' + 1, 'POST', data).then((res) => {
					console.log('近一周支付笔数', res.data.data)
					that.chartsDataLine2.series[1].data = res.data.data

				})
			},
			//获取客流量
			getkeren() {
				var that = this
				var data = {}
				that.$http('/api/user/store/getStatisticBrowseList/' + 1, 'POST', data).then((res) => {
					console.log('近一周客流量', res.data.data)
					that.chartsDataLine2.series[0].data = res.data.data
					that.getordernumber()
				})
			},
			//获取列表日期
			gettime() {
				var that = this
				var data = {}
				that.$http('/api/user/store/getStatisticList/' + 1, 'POST', data).then((res) => {
					console.log('近一周日期', res.data.data)
					that.chartsDataLine2.categories = res.data.data
					that.getkeren()
				})
			},
			// 获取订单量浏览量
			getnumber() {
				var that = this
				var data = {}
				that.$http('/api/user/store/getSortOrderNumList/' + 1, 'POST', data).then((res) => {
					that.placeordernumber = JSON.stringify(res.data.data)
					console.log('今日下单量', that.placeordernumber)

				})
				that.$http('/api/user/store/getSortbrowseList/' + 1, 'POST', data).then((res) => {
					that.browsenumber = JSON.stringify(res.data.data)
					console.log('今日浏览量', that.browsenumber)
				})
			},
			//查看详情
			todetails() {
				uni.navigateTo({
					url: "../taskdetails/taskdetails"
				})
			},
			//选择日期
			selectcalendar(e) {
				console.log('开始', e.startDate)
				console.log('结束', e.endDate)
				this.startDate = e.startDate
				this.endDate = e.endDate
				this.getorderlist()
			},
			//选择类型
			selecttype(e) {
				console.log("选择的类型", this.typelist[e[0]])
				this.typeindex = e[0]
				this.getorderlist()
			},
			//选择技师
			selecttechnician(e) {
				console.log("选择的技师", this.technicianselector[e[0]])
				this.technicianindex = e[0]
				this.getorderlist()
			},
			//tab切换
			selecttab(index) {
				this.tabindex = index
			},
		}
	}
</script>

<style lang="scss">
	image {
		width: 100%;
		height: 100%;
	}

	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}

	// tab切换
	.tab {
		padding: 20rpx;
		border-bottom: 1rpx solid #ECECEC;
		display: flex;
		align-items: center;
		justify-content: space-around;
		color: rgba(0, 0, 0, 0.25);

		.active {
			color: rgba(0, 0, 0, 0.76);
		}
	}

	// 统计
	.statistics {
		display: flex;
		align-items: center;
		justify-content: space-around;
		color: rgba(0, 0, 0, 0.85);
		font-size: 24rpx;
		padding: 20rpx;
		text-align: center;

		.cheng {
			color: #ffa400;
			font-size: 32rpx;
			margin: 20rpx 0;
		}

		.left {
			flex: 0 0 40%;
		}

		.center {
			width: 1rpx;
			height: 100rpx;
			background-color: #ECECEC;
		}

		.right {
			flex: 0 0 40%;
		}
	}


	// 订单量
	.header {
		padding: 20rpx;
		border-bottom: 1rpx solid #ECECEC;

		.box {
			display: flex;
			align-items: center;
			padding: 10rpx 0;

			.left {
				flex: 0 0 20%;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.34);
				text-align: center;
			}

			.select {
				display: flex;
				align-items: center;

				.image {
					width: 30rpx;
					height: 30rpx;
					margin-left: 20rpx;
				}
			}
		}


	}

	.list {
		padding: 20rpx;
		border-bottom: 1rpx solid #ECECEC;
		display: flex;
		justify-content: space-between;

		.left {
			width: 120rpx;
			height: 120rpx;
		}

		.right {
			flex: 0 0 80%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.top {
				display: flex;
				justify-content: space-between;

				.complete {
					color: rgb(199, 199, 199);
				}

				.incomplete {
					color: rgb(36, 153, 255);
				}

				.cancel {
					color: #FF0000;
				}

				.name {
					color: #000000;
					font-size: 30rpx;
				}
			}

			.center {
				color: #ECECEC;
				font-size: 24rpx;
			}

			.bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.lookdetails {
					width: 120rpx;
					height: 40rpx;
					font-size: 26rpx;
					color: #C8C9CC;

				}
			}
		}
	}
</style>
